<template>
  <el-dialog
    title="数据表选择"
    v-model="state.visable"
    :close-on-click-modal="false"
    width="700px"
    class="Good-dialog table-dialog"
    lock-scroll
    append-to-body
  >
    <el-form @submit.prevent class="mb15">
      <el-form-item label="关键词">
        <el-input
          v-model="state.keyword"
          placeholder="请输入关键词查询"
          clearable
          @keyup.enter="query()"
          style="max-width: 180px"
        />
        <el-button type="primary" @click="query()" class="ml10">
          <el-icon><Search /></el-icon>
          {{ $t("message.commonBtn.query") }}
        </el-button>
        <el-button @click="refresh()">
          <el-icon><Refresh /></el-icon>
          {{ $t("message.commonBtn.reset") }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="state.listLoading"
      :data="state.list"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      :border="false"
      @row-click="toggleSelection"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="表名" show-overflow-tooltip />
      <el-table-column prop="description" label="说明" width="150" show-overflow-tooltip />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">{{ $t("message.commonBtn.cancel") }}</el-button>
        <el-button type="primary" @click="select()">{{ $t("message.commonBtn.confirm") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="TableForm">
import codeGenApi from "@/api-services/apis/generator/codeGenApi";
import { reactive, ref } from "vue";
import { DbTableInfo } from "@/api-services/models/codeGen";
import { Search, Refresh } from "@element-plus/icons-vue";
const multipleTable = ref();
const state = reactive({
  visable: false,
  listLoading: false,
  checked: [] as Array<DbTableInfo>,
  list: [] as Array<DbTableInfo>,
  oldList: [] as Array<DbTableInfo>,
  configId: "",
  keyword: ""
});
const openDialog = (configId: string) => {
  state.visable = true;
  state.configId = configId;
  initData();
};
const closeDialog = () => {
  state.visable = false;
};
//数据表初始化
const initData = async () => {
  state.listLoading = true;
  await codeGenApi.tableSelector({ ConfigId: state.configId }).then(res => {
    state.list = res.data.data;
    state.listLoading = false;
  });
};
const query = () => {
  filter();
};
//重置
const refresh = () => {
  state.keyword = "";
  filter();
};
const filter = () => {
  if (state.keyword === "") state.list = state.oldList;
  else {
    state.oldList = state.list;
    state.list = state.list.filter(item => item.name.indexOf(state.keyword) > -1 || item.description.indexOf(state.keyword) > -1);
  }
};
const emits = defineEmits(["select"]);
const select = async () => {
  closeDialog();
  emits("select", state.checked);
};
const handleSelectionChange = (val: Array<DbTableInfo>) => {
  state.checked = val;
};
const toggleSelection = (row: DbTableInfo) => {
  multipleTable.value.toggleRowSelection(row);
};
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.table-dialog {
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    height: 70vh;
    padding: 0 !important;
    overflow: hidden;
    .Good-common-search-box {
      margin-bottom: 0;
      .Good-common-search-box-right {
        padding: 10px 10px 0 0;
      }
    }
  }
}
</style>
